5.3:H205102 在網頁內容呈現設計時，避免以表格做多欄文字的設計

不良設計

下面的不良設計是使用表格的方式作為網頁版面文字編排的工具。

不良設計：

<TABLE width="800" height="75" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="200" bgcolor="#eeeeee">資料一</TD>
<TD width="400" bgcolor="#9999FF">主要網頁內容資料二</TD>
<TD width="200" bgcolor="#999999">資料三</TD>
</TR>
<TR>
<TD bgcolor="#eeeeee">【內容】</TD>
<TD bgcolor="#9999FF">【內容】</TD>
<TD bgcolor="#999999">【內容】</TD>
</TR>
<TR>
<TD bgcolor="#eeeeee"></TD>
<TD bgcolor="#9999FF"></TD>
<TD bgcolor="#999999"></TD>
</TR>
</TABLE>

範例結束

正確示範

網頁設中應要盡量避免使用表格來作為網頁版面的編排，下面的正確例子是使用style sheets的方式來進行網頁中文件的編排。

正確範例：

<HEAD>
<STYLE type="text/css">
<!--
#col1{
    top:10%;
    left:0%;
    width:20%;
    background:#eeeeee;
    position:absolute;
    overflow: hidden;
    height: 90%;
    background-color: #eeeeee;
    }
#col2{
    top:10%;
    left:20%;
    width:40%;
    background:#eeeeee;
    position:absolute;
    overflow: hidden;
    height: 90%;
    background-color: #9999FF;
    }
#col3{
    top:10%;
    left:60%;
    width:20%;
    background:#D5CFB0;
    position:absolute;
    overflow: hidden;
    height: 90%;
    background-color: #999999;
    }
-->
</STYLE>
</HEAD>

  <DIV id="col1">
  <P align="center">資料一 </P>
  <P align="center">【內容】</P>
  </DIV>
  <DIV id="col2">
  <P align="center">主要網頁內容資料二 </P>
  <P align="center">【內容】</P>
  </DIV>
  <DIV id="col3">
  <P align="center">資料三</P>
  <P align="center">【內容】</P>
  </DIV>

範例結束